<template>
	<view class="pages">

		<view class="box">
			<view class="box_herder flex align-items justify-content-between">
				<view class="box_herder_left">风险措施确认</view>
				<!-- 	<view class="box_herder_right flex align-items">
					<view>关联票</view>
					<u-icon name="arrow-up" color="#999999" size="14"></u-icon>
				</view> -->
			</view>
			<view class="content">
				<!-- <view class="prompt">注：请按顺序执行</view> -->
				<view class="content_item" v-for="(v,i) in listRisk" :key="i">
					<view class="content_item_title">{{i+1}}.{{v.identification}}</view>
					<view class="content_item_content">{{v.measure}}</view>
					<view class="content_item_rideo flex align-items ">
						<view class="yuan" v-if="v.state ==0"></view>
						<image class="imgyuan " v-else src="/static/img/index/yixuanzhong.png" mode=""></image>
						<view class="txt" :class="{
						color: i!=idx 
					}">{{v.state ==1?'已执行':'未执行'}}</view>
					</view>
					<view class="content_item_upload" v-if="v.ifPhotograph ==1" style="margin-top: 20rpx;">
						<!-- 	<u-upload :fileList="v.file" :capture="['camera']" :disabled="idx != i || v.state ==1"
							@afterRead="(event)=>afterRead(event,i)" @delete="(event)=>deletePic(event,i)" name="1"
							multiple :maxCount="1"></u-upload> -->
						<view class="uploadlist">
							<block v-if="v.file.length>0">
								<view class="uploadlist_item" v-for="(vd , ixd) in v.file" :key="ixd">
									<image :src="vd.url" mode="aspectFill" class="uploadlist_item_image"
										@click="previewImage(vd.url)"></image>
									<image src="/static/delete.png" class="uploadlist_delet" @click="deltet(i,ixd,v)">
									</image>
								</view>
							</block>

							<view class="uploadlist_add" @click="uplaodImg(i,v)" v-if="v.file.length<=0">
								<u-icon name="plus" size="30" color="#E6E6E6"></u-icon>
							</view>
						</view>
					</view>

				</view>
			</view>

		</view>
		<!-- 安全措施 -->
		<!-- 	<view class="secure">
			<view class="secure_title">安全保护措施与用品</view>
			<view class="secure_item ">
				<view class="secure_item_labal">措施与用品</view>
				<view class="secure_item_value  flex align-items" style="flex: 1;">
					
					<div style="flex: 1;" class="measureValue" :class="{
						measureColor:!measureValue
					}">
						{{measureValue || '请选择'}}
					</div>
					<u-icon name="arrow-right" color="#CCCCCC" :size="16"></u-icon>
				</view>
			</view>
		</view> -->
		<!-- 相关人员签字确认 -->
		<view class="secure" style="display: none;">
			<view class="secure_title">相关人员签字确认</view>
			<view class="secure_item flex align-items " style="border: none;">
				<view class="secure_item_labal laas">操作人</view>
				<view class="secure_item_values  ">
					{{obj.operateUserName || ''}}
				</view>
			</view>
			<view class="secure_item ">
				<view class="secure_item_labal">签字确认</view>
				<view class="secure_item_value  flex align-items flex-wrap">
					<block v-for="(v,i) in riskOperateSign" :key="i">
						<view class="border" @click="takePhoto('riskOperateSign',i)" v-if="v.fileUrl ==''">+</view>
						<image class="userSign" :src="baseURL+v.fileUrl" mode="" style="width: 100rpx;height: 100rpx;"
							v-else></image>
					</block>
				</view>
			</view>

			<view class="secure_item flex align-items " style="border: none;">
				<view class="secure_item_labal laas">监护人</view>
				<view class="secure_item_values  " v-for="(v,i) in riskGuardianSign " :key="i">
					{{v.name}}
				</view>
			</view>
			<view class="secure_item ">
				<view class="secure_item_labal">签字确认</view>
				<view class="secure_item_value  flex align-items flex-wrap">
					<block v-for="(v,i) in riskGuardianSign" :key="i">
						<view class="border" @click="takePhoto('riskGuardianSign',i)" v-if="v.fileUrl ==''">+</view>
						<image class="userSign" :src="baseURL+v.fileUrl" mode="" style="width: 100rpx;height: 100rpx;"
							v-else></image>
					</block>
				</view>
			</view>
			
			<view class="secure_item flex align-items " style="border: none;">
				<view class="secure_item_labal laas">一级审批</view>
				<view class="secure_item_values  " v-for="(v,i) in riskMonitorSign" :key="i">
					{{v.name}}
				</view>
			</view>
			<view class="secure_item ">
				<view class="secure_item_labal">签字确认</view>
				<view class="secure_item_value  flex align-items flex-wrap">
					<!-- 	<view class="border" @click="takePhoto">+</view> -->
					<block v-for="(v,i) in riskMonitorSign" :key="i">
						<view class="border" @click="takePhoto('riskMonitorSign',i)" v-if="v.fileUrl ==''">+</view>
						<image class="userSign" :src="baseURL+v.fileUrl" mode="" style="width: 100rpx;height: 100rpx;"
							v-else></image>
					</block>
				</view>
				<!-- 	<view class="secure_item_value  flex align-items">
				<view class="border">+</view>
			</view> -->
			</view>
			<view class="secure_item flex align-items " style="border: none;">
				<view class="secure_item_labal laas">二级审批</view>
				<view class="secure_item_values  " v-for="(v,i) in riskShiftSign" :key="i">
					{{v.name}}
				</view>
			</view>
			<view class="secure_item ">
				<view class="secure_item_labal" style="flex: 0 0 auto;">签字确认</view>
				<view class="  flex align-items flex-wrap" v-if=" obj.shiftSupervisorName">
					<view class="secure_item_value  flex align-items flex-wrap margin-top10">
						<!-- 	<view class="border" @click="takePhoto">+</view> -->
						<block v-for="(v,i) in riskShiftSign" :key="i">
							<view class="border" @click="takePhoto('riskShiftSign',i)" v-if="v.fileUrl ==''">+</view>
							<image class="userSign" :src="baseURL+v.fileUrl" mode=""
								style="width: 100rpx;height: 100rpx;" v-else></image>
						</block>
					</view>
				</view>

			</view>
			
		</view>
		<view class="btn" @click="nuxt"> 下一步</view>
	</view>
</template>

<script>
	import urlConfig from "@/request/urlConfig.js";
	export default {
		props: {
			listRisk: {
				type: Array,
				default: []
			},
			obj: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				baseURL: urlConfig.nearbyUrl,
				idx: 1000000,
				riskOperateSign: [], //操作人
				riskGuardianSign: [], //监护人
				riskShiftSign: [], //值长
				riskMonitorSign: [], //值班长
				measureValue: ''
			};
		},
		watch: {
			listRisk: function(newVal, oldVal) {
				// this.riskOperateSign = this.obj.riskOperateSign ? [JSON.parse(this.obj.riskOperateSign)] : this.splitFun(
				// 	'operateUserId', "operateUserName")
				// this.riskGuardianSign = this.obj.riskGuardianSign ? JSON.parse(this.obj.riskGuardianSign) : this
				// 	.splitFun(
				// 		'guardianUserId', "guardianUserName")
				// this.riskShiftSign = this.obj.riskShiftSign ? JSON.parse(this.obj.riskShiftSign) : this.splitFun(
				// 	'shiftSupervisorId',
				// 	"shiftSupervisorName")
				// this.riskMonitorSign = this.obj.riskMonitorSign ? JSON.parse(this.obj.riskMonitorSign) : this.splitFun(
				// 	'monitorUserId',
				// 	"monitorUserName")
				// this.measureValue = this.obj.riskSafetyProductJson ? JSON.parse(this.obj.riskSafetyProductJson).map(
				// 	v => v.value).join(',') : ''
				// console.log(this.riskOperateSign, this.riskGuardianSign, this.riskShiftSign, this.riskMonitorSign,
				// 	"riskOperateSign");
			}
		},
		created() {
			this.list = [...this.listRisk]
			console.log(this.listRisk, "listRisk");
			console.log(this.list, "console.log");
			// this.idx = this.findLastIndexWithStateOne(this.list)
			// this.ifDis()
			this.riskOperateSign = this.obj.riskOperateSign ? [JSON.parse(this.obj.riskOperateSign)] : this.splitFun(
				'operateUserId', "operateUserName")
			this.riskGuardianSign = this.obj.riskGuardianSign ? JSON.parse(this.obj.riskGuardianSign) : this
				.splitFun(
					'guardianUserId', "guardianUserName")
			this.riskShiftSign = this.obj.riskShiftSign ? JSON.parse(this.obj.riskShiftSign) : this.splitFun(
				'shiftSupervisorId',
				"shiftSupervisorName")
			this.riskMonitorSign = this.obj.riskMonitorSign ? JSON.parse(this.obj.riskMonitorSign) : this.splitFun(
				'monitorUserId',
				"monitorUserName")
			this.measureValue = this.obj.riskSafetyProductJson ? JSON.parse(this.obj.riskSafetyProductJson).map(
				v => v.value).join(',') : ''
			console.log(this.riskOperateSign, this.riskGuardianSign, this.riskShiftSign, this.riskMonitorSign,
				"riskOperateSign");
		},
		methods: {
			// 处理图片放大
			previewImage(url) {
				uni.previewImage({
					current: url,
					urls: [url],
					loop: true,
				})
			},

			uplaodImg(idx, row) {
				// :disabled="idx != i || v.state ==1"
				if (this.idx != idx || row.state == 1) return
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						// console.log(JSON.stringify(res.tempFilePaths));
						let that = this;
						this.$refs.helangCompress
							.compress(res.tempFiles[0], that, 1)
							.then((uploadRes) => {
								console.log(uploadRes, "res");
								this.list[idx].file.push({
									url: urlConfig.nearbyUrl + uploadRes.datas.file_path,
									urlTwo: uploadRes.datas.file_url,
								})
								console.log(this.list[idx]);
								this.$forceUpdate()
							});
					}
				})
			},
			deltet(i, idx, row) {
				if (row.state == 1) return
				this.list[i].file.splice(idx, 1)
				this.$forceUpdate()
			},
			// 定义一个方法  处理签字字段
			splitFun(idKey, nameKey) {
				const ids = this.obj[idKey].split(',')
				const names = this.obj[nameKey].split(',')
				let arr = []
				ids.forEach((v, i) => {
					arr.push({
						id: v,
						name: names[i],
						fileUrl: ''
					})
				})
				return arr
			},
			nuxt() {
				this.$emit('nuxt', 2)
			},
			afterRead() {

			},
			deletePic() {

			}
		}
	}
</script>

<style>
	page {
		background-color: #F5F5F5;
		padding-bottom: 40rpx;
	}
</style>
<style lang="scss" scoped>
	.pages {
		padding-bottom: 80rpx;
	}

	.herder {
		height: 170rpx;
		background: #FFFFFF;
		padding-top: 46rpx;
	}

	.box {
		margin-top: 18rpx;
		background-color: #FFFFFF;
		padding: 29rpx 34rpx;
		padding-bottom: 0;

		&_herder {
			padding-bottom: 29rpx;
			border-bottom: 1rpx solid #f5f5f5;

			&_left {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 33rpx;
				color: #000000;
			}

			&_right {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 29rpx;
				color: #999999;

				view {
					margin-right: 23rpx;
				}
			}
		}
	}

	.content {
		.prompt {
			margin-top: 21rpx;
			font-weight: 400;
			font-size: 25rpx;
			color: #FF0000;
			text-align: left;
			font-style: normal;
		}

		&_item {
			width: 693rpx;
			margin: 0 auto;
			margin-top: 17rpx;
			padding-bottom: 16rpx;
			border-bottom: 1rpx solid #E6E6E6;

			&_title {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 29rpx;
				color: #267DFF;
				line-height: 40rpx;
			}

			&_content {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 25rpx;
				color: #000000;
				margin-top: 10rpx;
				line-height: 36rpx;
			}

			&_rideo {
				margin-top: 17rpx;

				.yuan {
					width: 31rpx;
					height: 31rpx;
					border: 2rpx solid #E6E6E6;
					border-radius: 50%;
					margin-right: 14rpx;
				}

				.txt {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 25rpx;
					color: #000000;
				}

				.color {
					color: #8B8B8B;
				}

				.imgyuan {
					width: 34rpx;
					height: 34rpx;
					margin-right: 14rpx;
				}
			}
		}

		&_item:last-child {
			border: none;
		}
	}

	.secure {
		margin-top: 21rpx;
		background-color: #FFF;
		padding: 0 30rpx;

		&_title {
			height: 105rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 33rpx;
			color: #000000;
			line-height: 105rpx;
			border-bottom: 1rpx solid #E6E6E6;
		}

		&_item {
			min-height: 105rpx;
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #E6E6E6;

			&_labal {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 33rpx;
				color: #666666;
				width: 196rpx;
			}

			&_value {
				// flex: 1;
			}

			&_values {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 33rpx;
				color: #000000;
				margin-right: 20rpx;
			}
		}

		&_item:last-child {
			border: none;
		}

		.border {
			width: 153rpx;
			height: 69rpx;
			border: 2rpx solid #267DFF;
			text-align: center;
			line-height: 69rpx;

			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 29rpx;
			color: #267DFF;
			margin-right: 15rpx;
			margin-top: 15rpx;
		}
	}

	/deep/.placeholderClass {
		font-weight: 400;
		font-size: 26rpx;
		color: #CCCCCC;
	}

	.laas::before {
		content: '*';
		color: #FF0000;
	}

	.btn {
		height: 89rpx;
		text-align: center;
		line-height: 89rpx;
		margin-top: 20rpx;
		color: #FFF;
		background-color: #267DFF;
		position: fixed;
		width: 100%;
		bottom: 0;
	}

	/deep/.u-upload__button {
		width: 100rpx !important;
		height: 100rpx !important;
	}

	/deep/.u-upload__status {
		width: 100rpx !important;
		height: 100rpx !important;
	}

	/deep/ .u-upload__wrap__preview__image {
		width: 100rpx !important;
		height: 100rpx !important;
	}

	.measureValue {
		font-size: 32rpx;
	}

	.measureColor {
		color: #666666;
	}

	.userSign {
		margin-right: 10rpx;
		margin-top: 10rpx;
	}

	.uploadlist {
		display: flex;

		&_item {
			position: relative;
			margin-left: 10rpx;

			&_image {
				height: 150rpx;
				width: 150rpx;
				border-radius: 6rpx;
			}
		}

		&_delet {
			position: absolute;
			width: 30rpx;
			height: 30rpx;
			top: 0;
			right: 0;
			z-index: 10;
			background-color: #000000;
		}

		&_add {
			height: 150rpx;
			width: 150rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border: 1rpx solid #E6E6E6;
			border-radius: 6rpx;
		}
	}
</style>